<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <div slot="toStores" slot-scope="record">
          <a-tooltip :title="record.to_store_names.join(',')">
            {{ record.to_store_names.join(',') }}
          </a-tooltip>
        </div>
        <div slot="status" slot-scope="record">
          <a-tag color="orange" v-if="record.status == 0">排队中</a-tag>
          <a-tag color="blue" v-else>执行完成</a-tag>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getLogList } from '@/api/storeSync'
import { STable } from '@/components'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '来源店铺',
    dataIndex: 'from_store_name',
    key: 'from_store_name'
  },
  {
    title: '同步到店铺',
    scopedSlots: { customRender: 'toStores' },
    ellipsis: true
  },
  {
    title: '执行时间',
    dataIndex: 'created_at'
  },
  {
    title: '执行状态',
    scopedSlots: { customRender: 'status' }
  }
]

export default {
  name: 'StoreSync',
  components: {
    STable
  },
  data () {
    return {
      loading: false,
      columns,
      loadData: (parameter) => {
        return getLogList({
          ...parameter,
          ...this.queryParam
        }).then((res) => {
          return res.data
        }).catch(() => {
          this.$refs.table.localLoading = false
        })
      }
    }
  },
  mounted () {
  },
  watch: {
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>

</style>
